<template>
  <div>
    <div style="margin-bottom: 20px">
      <c-table-box :data="tableData" :table-max-height="400" hide-func :table-config="tableConfig" v-bind="$attrs" />
    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="urlList"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'Accessory',
  components: { ElImageViewer },
  props: {
    type: {
      type: String,
      default: ''
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      showViewer: false,
      urlList: [],
      fileTypeList: [],
      tableData: [],
      tableConfig: {
        setting: [
          {
            prop: 'attachmentName',
            label: '附件名称'
          },
          {
            prop: 'attachmentType',
            label: '附件类型'
          },
          {
            prop: 'createBy',
            label: '上传人'
          },
          {
            prop: 'createTime',
            label: '上传时间'
          },
          {
            label: '操作',
            type: 'hidden',
            width: '200',
            button: [
              {
                name: '查看预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '附件下载',
                clickFun: this.downLoadFile,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }
        ]
      }
    }
  },
  watch: {
    detailData: {
      handler(v) {
        getShopAttachment(v).then(res => {
          this.fileTypeList = res.data
        })
      }
    }
  },
  async created() {
    await getShopAttachment(this.detailData).then(res => {
      this.fileTypeList = res.data
    })
    switch (this.type) {
      case 'configAccessory':
        this.tableData = this.fileTypeList.filter(item => item.attachmentType === '产品配置清单' || item.attachmentType === '打款凭证')
        break
      case 'detailAccessory':
        this.tableData = this.fileTypeList.filter(item => item.attachmentType === '开单明细附件')
        break
      case 'unitAccessory':
        this.tableData = this.fileTypeList.filter(item => item.attachmentType === '施工单位管理')
        break
    }
  },
  methods: {
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
      this.urlList = []
    },
    handlePreview(file) {
      this.urlList = []
      // const typeName = file.typeName
      const typeArr = file.attachmentUrl.split('.')
      const typeName = file.typeName || typeArr[typeArr.length - 1]
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.showViewer = true
        let picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        if (file.attachmentUrl.indexOf('http') !== -1) {
          const url = file.attachmentUrl.split('cn')
          picUrl = process.env.VUE_APP_BPMPIC_PREFIX + url[url.length - 1]
        }
        this.urlList.push(picUrl)
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        // word,excel预览
        // const newFileUrl = encodeURIComponent(this.url + file.attachmentUrl)
        if (file.attachmentUrl.indexOf('http') === -1) {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
        } else {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + file.attachmentUrl)
        }
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    getFileData(file) {
      // const d = ((file.response || {}).data || {})
      const t = {
        // file
        ...file,
        attachmentName: file.attachmentName || '',
        attachmentUrl: file.attachmentUrl || '',
        createBy: file.createBy || '',
        createTime: file.createTime || '',
        id: file.id || file.uid,
        typeName: file.typeName || (file.attachmentUrl || '').split('.').pop(),
        belongModel: file.belongModel || '',
        attachmentType: file.attachmentType || '',
        configAttachmentId: file.configAttachmentId || ''
      }
      delete t.raw
      return t
    },
    downLoadFile(row) {
      const v = this.getFileData(row)
      this.$downFile(v)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-icon-circle-close:before{
  color: white
}
</style>
